<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>豆瓣</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 导航 -->
  <div class="nav-wapper">
    <nav class="nav">
      <div class="nav-left">
        <a class="nav-logo" href="www.douban.com">
          <img src="../4.实战-豆瓣/imgs/logo_db.png" alt="">
        </a>
        <div class="nav-search">
          <input type="text" placeholder="书籍、电影音乐、小组、成员">
          <i class="iconfont icon-search"></i>
        </div>
      </div>
      <div class="nav-right">
        <ul>
          <li class="book">
            <a href="">读书</a>
          </li>
          <li class="movie">
            <a href="">电影</a>
          </li>
          <li class="music">
            <a href="">音乐</a>
          </li>
          <li class="city">
            <a href="">同城</a>
          </li>
          <li class="team">
            <a href="">小组</a>
          </li>
          <li class="read">
            <a href="">阅读</a>
          </li>
          <li class="fm">
            <a href="">FM</a>
          </li>
          <li class="time">
            <a href="">时间</a>
          </li>
          <li>
            <a class="dou-pin" href="">豆品</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <!-- 登录 -->
  <div class="login-wapper">
    <div class="login-container">
      <div class="login-form">
        <div class="tabs ">
          <div class=" tab-phone active"><span>短信登录/注册</span></div>
          <div class="tab-pws "><span>密码登录</span></div>
        </div>
        <div class="phone-login active">
          <form action="">
            <div class="form-item-tips">
              <span>请仔细阅读</span><a href="#">豆瓣使用协议、隐私协议</a>
            </div>
            <div class="form-item">
              <div class="phone-code">
                <span >+86</span>
                <div id="choose-code" class="choose-code">
                  <div class="close">
                    <i class="iconfont icon-chahao"></i>
                  </div>
                  <h1>
                    选择国际区号
                  </h1>
                  <ul>
                    <li class="selected">
                      <div class="left">中国大陆</div>
                      <div class="right">+86</div>
                    </li>
                    <li>
                      <div class="left">中国大陆</div>
                      <div class="right">+86</div>
                    </li>
                    <li>
                      <div class="left">中国大陆</div>
                      <div class="right">+86</div>
                    </li>
                    <li>
                      <div class="left">中国大陆</div>
                      <div class="right">+86</div>
                    </li>
                    <li>
                      <div class="left">中国大陆</div>
                      <div class="right">+86</div>
                    </li>
                    <li>
                      <div class="left">中国大陆</div>
                      <div class="right">+86</div>
                    </li>
                    <li>
                      <div class="left">中国大陆</div>
                      <div class="right">+86</div>
                    </li>
                  </ul>
                </div>
              </div>
              <input type="text" placeholder="手机号">
            </div>
            <div class="form-item">
              <input type="text" placeholder="验证码">
              <div class="msg-code">
                <a href="">获取验证码</a>
              </div>
            </div>
            <div class="form-item login-btn">
              <a href="">登录豆瓣</a>
            </div>
            <div class="form-item msg-tip">
              <a href="">收不到验证码</a>
            </div>

        </div>
        <div class="password-login ">
          <div class="form-item-tips clearfix">
            <a href="#">找回密码</a>
          </div>
          <div class="form-item china">
            <div class="phone-code">
              <span>+86</span>
              <div class="choose-code">
                <div class="close">
                  <i class="iconfont icon-chahao"></i>
                </div>
                <h1>
                  选择国际区号
                </h1>
                <ul>
                  <li class="selected">
                    <div class="left">中国大陆</div>
                    <div class="right">+86</div>
                  </li>
                  <li>
                    <div class="left">中国大陆</div>
                    <div class="right">+86</div>
                  </li>
                  <li>
                    <div class="left">中国大陆</div>
                    <div class="right">+86</div>
                  </li>
                  <li>
                    <div class="left">中国大陆</div>
                    <div class="right">+86</div>
                  </li>
                  <li>
                    <div class="left">中国大陆</div>
                    <div class="right">+86</div>
                  </li>
                  <li>
                    <div class="left">中国大陆</div>
                    <div class="right">+86</div>
                  </li>
                  <li>
                    <div class="left">中国大陆</div>
                    <div class="right">+86</div>
                  </li>
                </ul>
              </div>
            </div>
            <input type="text" placeholder="手机号">
          </div>
          <div class="form-item outer input-show">
            <input type="text" placeholder="手机号/邮箱">
          </div>
          <div class="form-item">
            <input type="text" placeholder="验证码">
            <div class="msg-code">
              <a href="">获取验证码</a>
            </div>
          </div>
          <div class="form-item login-btn">
            <a href="">登录豆瓣</a>
          </div>
          <div class="form-item msg-tip">
            <a href="">海外手机登录</a>
          </div>
        </div>
        <div class="form-item thrid-login">
          <span>第三方登录:</span>
          <a href="">
            <i class="iconfont icon-weixin"></i>
          </a>
          <a href="">
            <i class="iconfont icon-weibo1"></i>
          </a>
        </div>
        </form>
      </div>

      <div class="download">
        <h1>豆瓣 <span>6.0</span></h1>
        <div class="download-btn">
          <a href="">下载豆瓣App</a>
          <div class="qrcode">
            <img class="little" src="./imgs/icon_qrcode_green.png" alt="">
            <div class="big">
              <img src="./imgs/doubanapp_qrcode.png" width="160" height="160" alt="">
              <p>iOS / Android 扫码直接下载</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="main-wapper">
    <div class="side">
      <div class="title-img">
        <a href="">
          <img src="./imgs/albums/849e1bcd2427525.jpg" alt="" width="250" height="125">
        </a>
      </div>
      <div class="title">
        <h2>热门话题· · · · · ·
          <a href="">(去话题广场)</a>
        </h2>
      </div>
      <ul class="artical-list">
        <li class="artical">
          <a href="" class="artical-title">我的考研笔记本</a>
          <span class="artical-visit">62.5万次浏览</span>
        </li>
        <li class="artical">
          <a href="" class="artical-title">我的考研笔记本</a>
          <span class="artical-visit">62.5万次浏览</span>
        </li>
        <li class="artical">
          <a href="" class="artical-title">我的考研笔记本</a>
          <span class="artical-visit">62.5万次浏览</span>
        </li>
        <li class="artical">
          <a href="" class="artical-title">我的考研笔记本</a>
          <span class="artical-visit">62.5万次浏览</span>
        </li>
        <li class="artical">
          <a href="" class="artical-title">我的考研笔记本</a>
          <span class="artical-visit">62.5万次浏览</span>
        </li>
        <li class="artical">
          <a href="" class="artical-title">我的考研笔记本</a>
          <span class="artical-visit">62.5万次浏览</span>
        </li>
      </ul>
    </div>
    <div class="main clearfix">
      <div class="title">
        <h2>
          热点内容· · · · · ·
          <a href="">(更多)</a>
        </h2>
      </div>
      <div class="albums">
        <ul>
          <li>
            <a href="">
              <img src="./imgs/albums/p2621793074.webp" alt="图片" width="170" height="170">
            </a>
            <div>
              <a href="">绘版</a>
              <span>31张照片</span>
            </div>
          </li>
          <li>
            <a href="">
              <img src="./imgs/albums/p2543215327.webp" alt="图片" width="170" height="170">
            </a>
            <div>
              <a href="">绘版</a>
              <span>31张照片</span>
            </div>
          </li>
          <li>
            <a href="">
              <img src="./imgs/albums/p2551350184.webp" alt="图片" width="170" height="170">
            </a>
            <div>
              <a href="">绘版</a>
              <span>31张照片</span>
            </div>
          </li>
          <li>
            <a href="">
              <img src="./imgs/albums/p2602141549.webp" alt="图片" width="170" height="170">
            </a>
            <div>
              <a href="">绘版</a>
              <span>31张照片</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="notes">
        <ul>
          <li class="note-item">
            <div class="note-title">
              <a href="">2020年下半年读书记</a>
            </div>
            <div class="author">
              神威的日记
            </div>
            <p>11月总结了上半年以后，我早就想把下半年也给总结掉了，为什么呢，因为天地有玄学...</p>
          </li>
          <li class="note-item">
            <div class="note-title">
              <a href="">余下只有噪音｜我的2020年度音乐总结</a>
            </div>
          </li>
          <li class="note-item">
            <div class="note-title">
              <a href="">「豆瓣电影历片单」2021月历——从1到12，电影名中的数字游戏</a>
            </div>
          </li>
          <li class="note-item">
            <div class="note-title">
              <a href="">寻踪堡林——2020年11月张家口古堡考察之行（上）</a>
            </div>
          </li>
          <li class="note-item">
            <div class="note-title">
              <a href="">【原创】英国警察警衔 附:为什么英国警察不配枪</a>
            </div>
          </li>
          <li class="note-item">
            <div class="note-title">
              <a href="">也不只有老外一个人就能带宝宝，我这个中国人爸爸也一个人带过</a>
            </div>
          </li>
          <li class="note-item">
            <div class="note-title">
              <a href="">2020迷影日记：强风吹拂</a>
            </div>
          </li>
          <li class="note-item">
            <div class="note-title">
              <a href="">豆瓣电影历｜什么都不是爱的对手</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 豆瓣时间 -->
  <div class="bg-wapper">
    <div class="main-wapper">
      <div class="category-block">
        <h2 class="category-name">
          <a href="http://www.baidu.com">豆瓣时间</a>
        </h2>
      </div>
      <div class="main">
        <div class="title">
          <h2>
            热点内容· · · · · ·
            <a href="">(更多)</a>
          </h2>
        </div>
        <div class="time">
          <ul>
            <li class="time-item">
              <a href="">
                <img src="./imgs/albums/time.jpg" alt="图片">
              </a>
              <a href="" class="desc">
                生死之间：10堂课学会如何与疾病共处
              </a>
              <h3>
                音频专栏
              </h3>
            </li>
            <li class="time-item">
              <a href="">
                <img src="./imgs/albums/time.jpg" alt="图片">
              </a>
              <a href="" class="desc">
                生死之间：10堂课学会如何与疾病共处
              </a>
              <h3>
                音频专栏
              </h3>
            </li>
            <li class="time-item">
              <a href="">
                <img src="./imgs/albums/time.jpg" alt="图片">
              </a>
              <a href="" class="desc">
                生死之间：10堂课学会如何与疾病共处
              </a>
              <h3>
                音频专栏
              </h3>
            </li>
            <li class="time-item">
              <a href="">
                <img src="./imgs/albums/time.jpg" alt="图片">
              </a>
              <a href="" class="desc">
                生死之间：10堂课学会如何与疾病共处
              </a>
              <h3>
                音频专栏
              </h3>
            </li>
            <li class="time-item">
              <a href="">
                <img src="./imgs/albums/time.jpg" alt="图片">
              </a>
              <a href="" class="desc">
                生死之间：10堂课学会如何与疾病共处
              </a>
              <h3>
                音频专栏
              </h3>
            </li>
            <li class="time-item">
              <a href="">
                <img src="./imgs/albums/time.jpg" alt="图片">
              </a>
              <a href="" class="desc">
                生死之间：10堂课学会如何与疾病共处
              </a>
              <h3>
                音频专栏
              </h3>
            </li>
            <li class="time-item">
              <a href="">
                <img src="./imgs/albums/time.jpg" alt="图片">
              </a>
              <a href="" class="desc">
                生死之间：10堂课学会如何与疾病共处
              </a>
              <h3>
                音频专栏
              </h3>
            </li>
            <li class="time-item">
              <a href="">
                <img src="./imgs/albums/time.jpg" alt="图片">
              </a>
              <a href="" class="desc">
                生死之间：10堂课学会如何与疾病共处
              </a>
              <h3>
                音频专栏
              </h3>
            </li>
            <li class="time-item">
              <a href="">
                <img src="./imgs/albums/time.jpg" alt="图片">
              </a>
              <a href="" class="desc">
                生死之间：10堂课学会如何与疾病共处
              </a>
              <h3>
                音频专栏
              </h3>
            </li>
            <li class="time-item">
              <a href="">
                <img src="./imgs/albums/time.jpg" alt="图片">
              </a>
              <a href="" class="desc">
                生死之间：10堂课学会如何与疾病共处
              </a>
              <h3>
                音频专栏
              </h3>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 电影 -->
  <div class="main-wapper">
    <div class="main">
      <div class="movie-left">
        <h2 class="category-name">
          <a href="http://www.jingdong.com">电影</a>
        </h2>
        <ul>
          <li>
            <a href="">影讯&购票</a>
          </li>
          <li>
            <a href="">选电影</a>
            <img src="./imgs/albums/new_menu.gif" alt="">
          </li>
          <li>
            <a href="">排行榜</a>
          </li>
          <li>
            <a href="">分类</a>
          </li>
          <li>
            <a href="">影评</a>
          </li>
          <li>
            <a href="">预告片</a>
          </li>
          <li>
            <a href="">问答</a>
          </li>
        </ul>
      </div>
      <div class="movie-right">
        <div class="movie-category">
          <div class="title">
            <h2>
              影片分类· · · · · ·
              <a href="http://sdfsfd.com">(更多)</a>
            </h2>
          </div>
          <ul >
            <li class="category-item">
              <a href="htpp://121221ssd.com">科幻</a>
            </li>
            <li class="category-item">
              <a href="htpp://121221ssd.com">科幻</a>
            </li>
            <li class="category-item">
              <a href="htpp://121221ssd.com">科幻</a>
            </li>
            <li class="category-item">
              <a href="htpp://121221ssd.com">科幻</a>
            </li>
            <li class="category-item">
              <a href="htpp://121221ssd.com">科幻</a>
            </li>
            <li class="category-item">
              <a href="htpp://121221ssd.com">科幻</a>
            </li>
            <li class="category-item">
              <a href="htpp://121221ssd.com">黑色幽默</a>
            </li>
            <li class="category-item">
              <a href="htpp://121221ssd.com">科幻</a>
            </li>
            <li class="category-item">
              <a href="htpp://121221ssd.com">科幻</a>
            </li>
            <li class="category-item">
              <a href="htpp://121221ssd.com">科幻</a>
            </li>
            <li class="category-item">
              <a href="htpp://121221ssd.com">科幻</a>
            </li>
            <li class="category-item">
              <a href="htpp://121221ssd.com">科幻</a>
            </li>
          </ul>
        </div>
        <div class="movie-hot">
          <div class="title">
            <h2>
              近期热门· · · · · ·
              <a href="http://sdfsfd.com">(更多)</a>
            </h2>
          </div>
          <ul>
            <li class="hot-item">
              <a href="http://sdfsf11.com">电话</a>
            </li>
            <li class="hot-item">
              <a href="http://sdfsf11.com">电话</a>
            </li>
            <li class="hot-item">
              <a href="http://sdfsf11.com">电话</a>
            </li>
            <li class="hot-item">
              <a href="http://sdfsf11.com">电话</a>
            </li>
            <li class="hot-item">
              <a href="http://sdfsf11.com">电话</a>
            </li>
            <li class="hot-item">
              <a href="http://sdfsf11.com">电话</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="movie-main">
        <div class="title">
          <h2>
            正在热映· · · · · ·
            <a href="">(更多)</a>
          </h2>
        </div>
        <ul class="movie-list">
          <li class="movie-item">
            <a class="pic" href="http://123.com">
              <img src="./imgs/albums/f1movie.webp" alt="拆弹专家">
            </a>
            <div  class="name">
              <a href="http://23234.com">拆弹专家</a>
            </div>
            <div class="scro">
              <span class="start-80"></span>
              <i>8.0</i>
            </div>
            <button>选票购座</button>
          </li>
          <li class="movie-item">
            <a class="pic" href="http://123.com">
              <img src="./imgs/albums/movie.webp" alt="拆弹专家">
            </a>
            <div  class="name">
              <a href="http://23234.com">拆弹专家</a>
            </div>
            <div class="scro">
              <span class="start-80"></span>
              <i>8.0</i>
            </div>
            <button>选票购座</button>
          </li>
          <li class="movie-item">
            <a class="pic" href="http://123.com">
              <img src="./imgs/albums/movie.webp" alt="拆弹专家">
            </a>
            <div  class="name">
              <a href="http://23234.com">拆弹专家</a>
            </div>
            <div class="scro">
              <span class="start-70"></span>
              <i>7.0</i>
            </div>
            <button>选票购座</button>
          </li>
          <li class="movie-item">
            <a class="pic" href="http://123.com">
              <img src="./imgs/albums/movie.webp" alt="拆弹专家">
            </a>
            <div  class="name">
              <a href="http://23234.com">拆弹专家</a>
            </div>
            <div class="scro">
              <span class="start-80"></span>
              <i>8.0</i>
            </div>
            <button>选票购座</button>
          </li>
          <li class="movie-item">
            <a class="pic" href="http://123.com">
              <img src="./imgs/albums/movie.webp" alt="拆弹专家">
            </a>
            <div  class="name">
              <a href="http://23234.com">拆弹专家</a>
            </div>
            <div class="scro">
              <span class="start-80"></span>
              <i>8.0</i>
            </div>
            <button>选票购座</button>
          </li>
          <li class="movie-item">
            <a class="pic" href="http://123.com">
              <img src="./imgs/albums/movie.webp" alt="拆弹专家">
            </a>
            <div  class="name">
              <a href="http://23234.com">拆弹专家</a>
            </div>
            <div class="scro">
              <span class="start-80"></span>
              <i>8.0</i>
            </div>
            <button>选票购座</button>
          </li>
          <li class="movie-item">
            <a class="pic" href="http://123.com">
              <img src="./imgs/albums/movie.webp" alt="拆弹专家">
            </a>
            <div  class="name">
              <a href="http://23234.com">拆弹专家</a>
            </div>
            <div class="scro">
              <span class="start-80"></span>
              <i>8.0</i>
            </div>
            <button>选票购座</button>
          </li>
          <li class="movie-item">
            <a class="pic" href="http://123.com">
              <img src="./imgs/albums/movie.webp" alt="拆弹专家">
            </a>
            <div  class="name">
              <a href="http://23234.com">拆弹专家</a>
            </div>
            <div class="scro">
              <span class="start-80"></span>
              <i>8.0</i>
            </div>
            <button>选票购座</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 小组 -->
  <div class="bg-wapper">
    <div class="main-wapper">
      <div class="group-left">
        <h2 class="category-name">
          <a href="http://www.jingdong.com">电影</a>
        </h2>
        <ul>
          <li><a href="12">Lorem.</a></li>
          <li><a href="12">Iste!</a></li>
          <li><a href="12">Atque.</a></li>
          <li><a href="2">Totam.</a></li>
          <li><a href="2">Vel.</a></li>
          <li><a href="3">Iure.</a></li>
          <li><a href="3">Necessitatibus.</a></li>
        </ul>
      </div>
      <div class="group-right">
        <div class="title">
          <h2>
            小组分类· · · · · ·
          </h2>
        </div>
      </div>
      <div class="group-main">
        <div class="title">
          <h2>
            热门小组· · · · · ·
            <a href="">(更多)</a>
          </h2>
        </div>
        <ul>
          <li class="group-item">
            <a href="http://234234cf.com">
              <img src="./imgs/albums/group.webp" alt="group">
            </a>
            <div class="info">
              <div >
                <a href="">刘慈欣</a>
              </div>
              <span>31266 个成员</span>
            </div>
          </li>
          <li class="group-item">
            <a href="http://234234cf.com">
              <img src="./imgs/albums/group.webp" alt="group">
            </a>
            <div class="info">
              <div >
                <a href="">刘慈欣</a>
              </div>
              <span>31266 个成员</span>
            </div>
          </li>
          <li class="group-item">
            <a href="http://234234cf.com">
              <img src="./imgs/albums/group.webp" alt="group">
            </a>
            <div class="info">
              <div >
                <a href="">刘慈欣</a>
              </div>
              <span>31266 个成员</span>
            </div>
          </li>
          <li class="group-item">
            <a href="http://234234cf.com">
              <img src="./imgs/albums/group.webp" alt="group">
            </a>
            <div class="info">
              <div >
                <a href="">刘慈欣</a>
              </div>
              <span>31266 个成员</span>
            </div>
          </li>
          <li class="group-item">
            <a href="http://234234cf.com">
              <img src="./imgs/albums/group.webp" alt="group">
            </a>
            <div class="info">
              <div >
                <a href="">刘慈欣</a>
              </div>
              <span>31266 个成员</span>
            </div>
          </li>
          <li class="group-item">
            <a href="http://234234cf.com">
              <img src="./imgs/albums/group.webp" alt="group">
            </a>
            <div class="info">
              <div >
                <a href="">刘慈欣</a>
              </div>
              <span>31266 个成员</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 读书 -->
  <div class="book">
    <div class="main-wapper">
      <div class="layout-left">
        <h2 class="section-title">
          <a href="http://www.jingdong.com">读书</a>
        </h2>
        <ul>
          <li><a href="12">Lorem.</a></li>
          <li><a href="12">Iste!</a></li>
          <li><a href="12">Atque.</a></li>
          <li><a href="2">Totam.</a></li>
          <li><a href="2">Vel.</a></li>
          <li><a href="3">Iure.</a></li>
          <li><a href="3">Necessitatibus.</a></li>
          <li class="icon">
            <a href="">
              <i class="iconfont icon-14"></i>
            </a>
            <div>
              <a href="">
                豆瓣阅读
              </a>
            </div>
        </li>
        </ul>
      </div>
      <div class="layout-right">
        <div class="title">
          <h2>
            原创数字作品 · · · · · ·
            <a href="">(更多)</a>
          </h2>
        </div>
        <ul>
          <li class="tab-item">
            <ul class="clearfix">
              <li><span>[文学]</span></li>
              <li><a href="">小说</a></li>
              <li><a href="">随笔</a></li>
              <li><a href="">日本文学</a></li>
              <li><a href="">Lorem.</a></li>
              <li><a href="">Quod.</a></li>
              <li><a href="">Eos?</a></li>
              <li><a href="">Excepturi!</a></li>
              <li><a href="">Doloribus?</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li class="tab-item">
            <ul class="clearfix">
              <li><span>[文学]</span></li>
              <li><a href="">小说</a></li>
              <li><a href="">随笔</a></li>
              <li><a href="">日本文学</a></li>
              <li><a href="">Lorem.</a></li>
              <li><a href="">Quod.</a></li>
              <li><a href="">Eos?</a></li>
              <li><a href="">Excepturi!</a></li>
              <li><a href="">Doloribus?</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li class="tab-item">
            <ul class="clearfix">
              <li><span>[文学]</span></li>
              <li><a href="">小说</a></li>
              <li><a href="">随笔</a></li>
              <li><a href="">日本文学</a></li>
              <li><a href="">Lorem.</a></li>
              <li><a href="">Quod.</a></li>
              <li><a href="">Eos?</a></li>
              <li><a href="">Excepturi!</a></li>
              <li><a href="">Doloribus?</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="layout-main">
        <div class="title">
          <h2>
            新书速递· · · · · ·
            <a href="">(更多)</a>
          </h2>
        </div>
        <ul>
          <li>
            <div class="pic">
              <a href="http://123.com">
                <img src="./imgs/albums/f1movie.webp" alt="拆弹专家">
              </a>
            </div>
            <div class="name">
              <a href="http://23234.com">自杀俱乐部</a>
            </div>
            <div  class="author">
              〔英〕尼克·霍...
            </div>
            <a class="button" href="sdfsdf">
              免费试读
            </a>
          </li>
          <li>
            <div class="pic">
              <a href="http://123.com">
                <img src="./imgs/albums/f1movie.webp" alt="拆弹专家">
              </a>
            </div>
            <div class="name">
              <a href="http://23234.com">自杀俱乐部</a>
            </div>
            <div  class="author">
              〔英〕尼克·霍...
            </div>
            <a class="button" href="sdfsdf">
              免费试读
            </a>
          </li>
          <li>
            <div class="pic">
              <a href="http://123.com">
                <img src="./imgs/albums/f1movie.webp" alt="拆弹专家">
              </a>
            </div>
            <div class="name">
              <a href="http://23234.com">自杀俱乐部</a>
            </div>
            <div  class="author">
              〔英〕尼克·霍...
            </div>
            <a class="button" href="sdfsdf">
              免费试读
            </a>
          </li>
          <li>
            <div class="pic">
              <a href="http://123.com">
                <img src="./imgs/albums/f1movie.webp" alt="拆弹专家">
              </a>
            </div>
            <div class="name">
              <a href="http://23234.com">自杀俱乐部</a>
            </div>
            <div  class="author">
              〔英〕尼克·霍...
            </div>
            <a class="button" href="sdfsdf">
              免费试读
            </a>
          </li>
        </ul>
        <div class="title">
          <h2>
            原创数字作品 · · · · · ·
            <a href="">(更多)</a>
          </h2>
        </div>
        <ul>
          <li>
            <div class="pic">
              <a href="http://123.com">
                <img src="./imgs/albums/s33749741.jpg" alt="拆弹专家">
              </a>
            </div>
            <div class="name">
              <a href="http://23234.com">自杀俱乐部</a>
            </div>
            <div  class="author">
              免费
            </div>
            <a class="button" href="sdfsdf">
              免费试读
            </a>
          </li>
          <li>
            <div class="pic">
              <a href="http://123.com">
                <img src="./imgs/albums/s33749741.jpg" alt="拆弹专家">
              </a>
            </div>
            <div class="name">
              <a href="http://23234.com">自杀俱乐部</a>
            </div>
            <div  class="author">
              免费
            </div>
            <a class="button" href="sdfsdf">
              免费试读
            </a>
          </li>
          <li>
            <div class="pic">
              <a href="http://123.com">
                <img src="./imgs/albums/s33749741.jpg" alt="拆弹专家">
              </a>
            </div>
            <div class="name">
              <a href="http://23234.com">自杀俱乐部</a>
            </div>
            <div  class="author">
              免费
            </div>
            <a class="button" href="sdfsdf">
              免费试读
            </a>
          </li>
          <li>
            <div class="pic">
              <a href="http://123.com">
                <img src="./imgs/albums/s33749741.jpg" alt="拆弹专家">
              </a>
            </div>
            <div class="name">
              <a href="http://23234.com">自杀俱乐部</a>
            </div>
            <div  class="author">
              免费
            </div>
            <a class="button" href="sdfsdf">
              免费试读
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 音乐 -->
  <div class="music">
    <div class="bg-wapper">
      <div class="main-wapper">
        <div class="layout-left">
          <h2 class="section-title">
            <a href="http://www.jingdong.com">读书</a>
          </h2>
          <ul>
            <li><a href="12">Lorem.</a></li>
            <li><a href="12">Iste!</a></li>
            <li><a href="12">Atque.</a></li>
            <li><a href="2">Totam.</a></li>
            <li><a href="2">Vel.</a></li>
            <li><a href="3">Iure.</a></li>
            <li><a href="3">Necessitatibus.</a></li>
            <li class="icon">
              <a href="">
                <i class="iconfont icon-CN_doubanFM"></i>
              </a>
              <div>
                <a href="">
                  豆瓣FM
                </a>
              </div>
          </li>
          <li class="icon">
            <a href="">
              <i class="iconfont icon-V"></i>
            </a>
            <div>
              <a href="">
                音乐达人
              </a>
            </div>
        </li>
          </ul>
        </div>
        <div class="layout-right">
          <div class="title">
            <h2>
              本周音乐达人 · · · · ·
              <a href="">(更多)</a>
            </h2>
          </div>
          <ul>
            <li>
              <div class="img">
                <a href="">
                  <img src="./imgs/liuxing.jpg" alt="">
                </a>
                <i class="cover"></i>
              </div>
              <div class="info">
                <a href="kd9d9d9">Alternative for Baroque</a>
                <div class="desc">
                  流派: 轻音乐 Easy Listening
                  <div class="fans">
                    512人关注
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="img">
                <a href="">
                  <img src="./imgs/liuxing.jpg" alt="">
                </a>
                <i class="cover"></i>
              </div>
              <div class="info">
                <a href="kd9d9d9">Alternative for Baroque</a>
                <div class="desc">
                  流派: 轻音乐 Easy Listening
                  <div class="fans">
                    512人关注
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="img">
                <a href="">
                  <img src="./imgs/liuxing.jpg" alt="">
                </a>
                <i class="cover"></i>
              </div>
              <div class="info">
                <a href="kd9d9d9">Alternative for Baroque</a>
                <div class="desc">
                  流派: 轻音乐 Easy Listening
                  <div class="fans">
                    512人关注
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="layout-main">
          <div class="title">
            <h2>
              新书速递· · · · · ·
              <a href="">(更多)</a>
            </h2>
          </div>
          <ul>
            <li>
              <div class="pic">
                <a href="http://123.com">
                  <img src="./imgs/music.jpg" alt="拆弹专家">
                </a>
              </div>
              <div class="name">
                <a href="http://23234.com">
                  1. 冀西南林路行
                </a>
              </div>
              <div  class="author">
                <a href="">
                  万能青年旅店
                </a>
              </div>
              <div class="scro">
                <span class="start-80"></span>
                <i>8.0</i>
              </div>
            </li>
            <li>
              <div class="pic">
                <a href="http://123.com">
                  <img src="./imgs/music.jpg" alt="拆弹专家">
                </a>
              </div>
              <div class="name">
                <a href="http://23234.com">
                  1. 冀西南林路行
                </a>
              </div>
              <div  class="author">
                <a href="">
                  万能青年旅店
                </a>
              </div>
              <div class="scro">
                <span class="start-80"></span>
                <i>8.0</i>
              </div>
            </li>
            <li>
              <div class="pic">
                <a href="http://123.com">
                  <img src="./imgs/music.jpg" alt="拆弹专家">
                </a>
              </div>
              <div class="name">
                <a href="http://23234.com">
                  1. 冀西南林路行
                </a>
              </div>
              <div  class="author">
                <a href="">
                  万能青年旅店
                </a>
              </div>
              <div class="scro">
                <span class="start-80"></span>
                <i>8.0</i>
              </div>
            </li>
            <li>
              <div class="pic">
                <a href="http://123.com">
                  <img src="./imgs/music.jpg" alt="拆弹专家">
                </a>
              </div>
              <div class="name">
                <a href="http://23234.com">
                  1. 冀西南林路行
                </a>
              </div>
              <div  class="author">
                <a href="">
                  万能青年旅店
                </a>
              </div>
              <div class="scro">
                <span class="start-80"></span>
                <i>8.0</i>
              </div>
            </li>
            <li>
              <div class="pic">
                <a href="http://123.com">
                  <img src="./imgs/music.jpg" alt="拆弹专家">
                </a>
              </div>
              <div class="name">
                <a href="http://23234.com">
                  1. 冀西南林路行
                </a>
              </div>
              <div  class="author">
                <a href="">
                  万能青年旅店
                </a>
              </div>
              <div class="scro">
                <span class="start-80"></span>
                <i>8.0</i>
              </div>
            </li>
            <li>
              <div class="pic">
                <a href="http://123.com">
                  <img src="./imgs/music.jpg" alt="拆弹专家">
                </a>
              </div>
              <div class="name">
                <a href="http://23234.com">
                  1. 冀西南林路行
                </a>
              </div>
              <div  class="author">
                <a href="">
                  万能青年旅店
                </a>
              </div>
              <div class="scro">
                <span class="start-80"></span>
                <i>8.0</i>
              </div>
            </li>
            <li>
              <div class="pic">
                <a href="http://123.com">
                  <img src="./imgs/music.jpg" alt="拆弹专家">
                </a>
              </div>
              <div class="name">
                <a href="http://23234.com">
                  1. 冀西南林路行
                </a>
              </div>
              <div  class="author">
                <a href="">
                  万能青年旅店
                </a>
              </div>
              <div class="scro">
                <span class="start-80"></span>
                <i>8.0</i>
              </div>
            </li>
            <li>
              <div class="pic">
                <a href="http://123.com">
                  <img src="./imgs/music.jpg" alt="拆弹专家">
                </a>
              </div>
              <div class="name">
                <a href="http://23234.com">
                  1. 冀西南林路行
                </a>
              </div>
              <div  class="author">
                <a href="">
                  万能青
                </a>
              </div>
              <div class="scro">
                <span class="start-80"></span>
                <i>8.0</i>
              </div>
            </li>
          </ul>
          <div class="title">
            <h2>
              热门歌单· · · · · ·
              <a href="">(更多)</a>
            </h2>
          </div>
          <ul>
            <li>
              <div class="pic">
                <a href="http://123.com">
                  <img src="./imgs/hot-music.jpg" alt="拆弹专家">
                </a>
                <i class="cover"></i>
              </div>
              <div class="name">
                <span>不老的精灵｜忘记全世界唯独只有我在等候你</span>
              </div>
            </li>
            <li>
              <div class="pic">
                <a href="http://123.com">
                  <img src="./imgs/hot-music.jpg" alt="拆弹专家">
                </a>
                <i class="cover"></i>
              </div>
              <div class="name">
                <span>不老的精灵｜忘记全世界唯独只有我在等候你</span>
              </div>
            </li>
            <li>
              <div class="pic">
                <a href="http://123.com">
                  <img src="./imgs/hot-music.jpg" alt="拆弹专家">
                </a>
                <i class="cover"></i>
              </div>
              <div class="name">
                <span>不老的精灵｜忘记全世界唯独只有我在等候你</span>
              </div>
            </li>
            <li>
              <div class="pic">
                <a href="http://123.com">
                  <img src="./imgs/hot-music.jpg" alt="拆弹专家">
                </a>
                <i class="cover"></i>
              </div>
              <div class="name">
                <span>不老的精灵｜忘记全世界唯独只有我在等候你</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 豆品 -->
  <div class="dou-pin">
    <div class="main-wapper">
      <div class="layout-left">
        <h2 class="section-title">
          <a href="http://www.jingdong2233223.com">豆品</a>
        </h2>
      </div>
      <div class="layout-right">
        <div class="title">
          <h2>
            热门活动· · · · · ·
          </h2>
        </div>
        <div class="top-img">
          <a href="">
            <img src="./imgs/hot-huodong.jpg" alt="">
          </a>
          <a href="" class="">我的豆瓣收藏夹里有什么</a>
        </div>
        <div class="title">
          <h2>
            热门活动· · · · · ·
            <a href="">(更多)</a>
          </h2>
        </div>
        <ul>
          <li>
            <a href="">用书籍标记时光，豆瓣读书周历2021上线！</a>
            <div class="info clearfix">
              <span >
                44人参与
              </span>
              <span >
                12-12
              </span>
            </div>
          </li>
          <li>
            <a href="">用书籍标记时光，豆瓣读书周历2021上线！</a>
            <div class="info clearfix">
              <span >
                44人参与
              </span>
              <span >
                12-12
              </span>
            </div>
          </li>
          <li>
            <a href="">用书籍标记时光，豆瓣读书周历2021上线！</a>
            <div class="info clearfix">
              <span >
                44人参与
              </span>
              <span >
                12-12
              </span>
            </div>
          </li>
          <li>
            <a href="">用书籍标记时光，豆瓣读书周历2021上线！</a>
            <div class="info clearfix">
              <span >
                44人参与
              </span>
              <span >
                12-12
              </span>
            </div>
          </li>
          
        </ul>
      </div>
      <div class="layout-main">
        <div class="title">
          <h2>
            热卖商品· · · · · ·
            <a href="">(更多)</a>
          </h2>
        </div>
        <ul>
          <li>
            <div class="img">
              <a href="http://sdfsfd232.com">
                <img src="./imgs/doupin.jpg" alt="">
              </a>
            </div>
            <div class="info clearfix">
              <a href="" class="name">豆瓣电影日历2021</a>
              <span class="price">99</span>
            </div>
          </li>
          <li>
            <div class="img">
              <a href="http://sdfsfd232.com">
                <img src="./imgs/doupin.jpg" alt="">
              </a>
            </div>
            <div class="info clearfix">
              <a href="" class="name">豆瓣电影日历2021</a>
              <span class="price">99</span>
            </div>
          </li>
          <li>
            <div class="img">
              <a href="http://sdfsfd232.com">
                <img src="./imgs/doupin.jpg" alt="">
              </a>
            </div>
            <div class="info clearfix">
              <a href="" class="name">豆瓣电影日历2021</a>
              <span class="price">99</span>
            </div>
          </li>
          <li>
            <div class="img">
              <a href="http://sdfsfd232.com">
                <img src="./imgs/doupin.jpg" alt="">
              </a>
            </div>
            <div class="info clearfix">
              <a href="" class="name">豆瓣电影日历2021</a>
              <span class="price">99</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="city">
    <div class="bg-wapper">
      <div class="main-wapper">
        <div class="layout-left">
          <h2 class="section-title">
            <a href="http://www.jingdong2233223.com">豆品</a>
          </h2>
          <ul>
            <li><a href="12">Lorem.</a></li>
            <li><a href="12">Iste!</a></li>
            <li><a href="12">Atque.</a></li>
            <li><a href="2">Totam.</a></li>
            <li><a href="2">Vel.</a></li>
            <li><a href="3">Iure.</a></li>
            <li><a href="3">Necessitatibus.</a></li>
          </ul>
        </div>
        <div class="layout-right">
          <div class="title">
            <h2>
              活动标签· · · · · ·
              <a href="http://qq.com">(更多)</a>
            </h2>
          </div>
          <div class="type">
            <a href="23d">音乐»</a>
          </div>
          <ul class="clearfix">
            <li><a href="ewe">Lorem.</a></li>
            <li><a href="q">Reiciendis!</a></li>
            <li><a href="e">Saepe?</a></li>
            <li><a href="e">Laboriosam?</a></li>
            <li><a href="q">Consequuntur!</a></li>
          </ul>
          <div class="type">
            <a href="23d">音乐»</a>
          </div>
          <ul class="clearfix">
            <li><a href="ewe">Lorem.</a></li>
            <li><a href="q">Reiciendis!</a></li>
            <li><a href="e">Saepe?</a></li>
            <li><a href="e">Laboriosam?</a></li>
            <li><a href="q">Consequuntur!</a></li>
          </ul>
          <div class="type">
            <a href="23d">音乐»</a>
          </div>
          <ul class="clearfix">
            <li><a href="ewe">Lorem.</a></li>
            <li><a href="q">Reiciendis!</a></li>
            <li><a href="e">Saepe?</a></li>
            <li><a href="e">Laboriosam?</a></li>
            <li><a href="q">Consequuntur!</a></li>
          </ul>
          <div class="type">
            <a href="23d">音乐»</a>
          </div>
          <ul class="clearfix">
            <li><a href="ewe">Lorem.</a></li>
            <li><a href="q">Reiciendis!</a></li>
            <li><a href="e">Saepe?</a></li>
            <li><a href="e">Laboriosam?</a></li>
            <li><a href="q">Consequuntur!</a></li>
          </ul>
        </div>
        <div class="layout-main">
          <div class="title">
            <h2>
              合肥 · 本周热门活动· · · · · ·
              <a href="http://qq.com">(更多)</a>
            </h2>
          </div>
          <ul>
            <li>
              <div class="pic">
                <a href="http://112132.com">
                  <img src="./imgs/beyound.jpg" alt="">
                </a>
              </div>
              <div class="info">
                <div >
                  <a href="234234dd">致敬BEYOND·黄家驹纪念演唱会</a>
                </div>
                <div class="desc">
                  <time datetime="2021-01-03">1月3日 周日 19:40 - 21:40</time>
                  <address>安徽大剧院 安徽省合肥市包...</address>
                  <p>4人关注</p>
                </div>
              </div>
            </li>
            <li>
              <div class="pic">
                <a href="http://112132.com">
                  <img src="./imgs/beyound.jpg" alt="">
                </a>
              </div>
              <div class="info">
                <div >
                  <a href="234234dd">致敬BEYOND·黄家驹纪念演唱会</a>
                </div>
                <div class="desc">
                  <time datetime="2021-01-03">1月3日 周日 19:40 - 21:40</time>
                  <address>安徽大剧院 安徽省合肥市包...</address>
                  <p>4人关注</p>
                </div>
              </div>
            </li>
            <li>
              <div class="pic">
                <a href="http://112132.com">
                  <img src="./imgs/beyound.jpg" alt="">
                </a>
              </div>
              <div class="info">
                <div >
                  <a href="234234dd">致敬BEYOND·黄家驹纪念演唱会</a>
                </div>
                <div class="desc">
                  <time datetime="2021-01-03">1月3日 周日 19:40 - 21:40</time>
                  <address>安徽大剧院 安徽省合肥市包...</address>
                  <p>4人关注</p>
                </div>
              </div>
            </li>
            <li>
              <div class="pic">
                <a href="http://112132.com">
                  <img src="./imgs/beyound.jpg" alt="">
                </a>
              </div>
              <div class="info">
                <div >
                  <a href="234234dd">致敬BEYOND·黄家驹纪念演唱会</a>
                </div>
                <div class="desc">
                  <time datetime="2021-01-03">1月3日 周日 19:40 - 21:40</time>
                  <address>安徽大剧院 安徽省合肥市包...</address>
                  <p>4人关注</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="main-wapper clearfix">
      <div class="layout-left">
        <p>© 2005－2020 douban.com, all rights reserved 北京豆网科技有限公司</p>
        <p><a href="2s">京ICP证090015号</a> 京ICP备11027288号 <a href="2">网络视听许可证0110418号 食品经营许可证</a></p>
        <p>京网文[2015]2026-368号 <a href="d">新出发京批字第直160029号</a>   新出网证(京)字129号</p>
        <p>违法和不良信息投诉电话：4008353331-9 </p>
        <p><a href="e">中国互联网举报中心</a>电话：12377 <a href="cd">京公网安备11010502000728</a></p>
      </div>
      <div class="layout-main">
        <a href="23">Lorem.</a>
        <a href="1">Saepe?</a>
        <a href="3">Sapiente.</a>
        <a href="3">Expedita.</a>
        <a href="3">Mollitia.</a>
      </div>
    </div>
  </div>
  <script src="./js/index.js"></script>
</body>

</html>